import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import ProForm, { DrawerForm, ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
import React, { useState, useRef } from 'react';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import { Popconfirm,Button, InputNumber} from 'antd';
import { accAdd, accDiv, manufacturerOptionArray, manufacturerOptionOnly, moneyFormat } from '@/utils/utils';
export default () => {
const [showCreate, setShowCreate] = useState(false);
const actionRef = useRef<ActionType>();
const [detail, setDetail] = useState<any>({});
const [priceData, setPriceData] = useState<any[]>([
  {priceLevel:'区域价格表',status:'启用',key:0},{priceLevel:'标准价格表',status:'启用',key:1}])
const [showPrice,setShowPrice] = useState(false);
const [editableMoneyKeys, setEditableMoneyRowKeys] = useState<React.Key[]>([]);
const [oriData,setOriData]  = useState<any[]>([]);
const [moneyData,setMoneyData] = useState<any[]>([{productCode:'MD00001',productName:'双极抓取钳',taxRate:13,pId:1}]);

const moneyColumns:ProColumns[] = [
  {
    title: '产品型号',
    dataIndex: 'productCode',
    editable:false
  },
  {
    title: '产品名称',
    dataIndex: 'productName',
    editable:false
  },
  {
    title: '单位',
    dataIndex: 'usageUnit',
    editable:false,
    hideInSearch:true,
    renderText:()=>'个'
  },
  {
    title: '含税价格',
    // valueType:'money',
    dataIndex: 'price',
    editable:true,
    hideInSearch:true,
    formItemProps: (form, {
      rowIndex
    }) => {
      return {
        rules: [{
          required: true,
          message: '必填'
        }]
      };
    },
    renderFormItem: (_:any, {
      type,
      defaultRender,
      formItemProps,
      fieldProps,
      record,
      ...rest
    }, form) => {
      return <InputNumber key={_.productId+''}  min={0}  placeholder='请输入'/>;
    }
  },
  {
    title: '税率',
    dataIndex: 'taxRate',
    editable:false,
    hideInSearch:true,
    renderText:(val)=>val+'%'
  },
  {
    title: '不含税价格',
    dataIndex: 'taxExcludedPrice',
    hideInSearch:true,
    editable:false,
    renderText:(_,record:any)=>{
      var val = record.price
      if(isNaN(parseFloat(val))){
        val = 0
      }
      return moneyFormat(accDiv(val,accAdd(1,accDiv(record.taxRate,100))).toFixed(2))
    }
  },
  {
    title: '修改人',
    dataIndex: 'updateBy',
    editable:false,
    hideInSearch:true,
  },
  {
    title: '修改日期',
    dataIndex: 'updateTime',
    editable:false,
    hideInSearch:true,
  },
  {
    title:'操作',
    valueType:'option',
    width:150,
    render: (text, record:any, _, action) => [
       <Popconfirm title="确定删除吗?"  key="delete_3"  onConfirm={async () => {
       
    }}>
    <a key="delete">删除</a></Popconfirm>
    ]}
]


const columns: ProColumns[] = [
 
   {
       title:'价格表名称',
       dataIndex:'priceLevel',
       ellipsis:true,
   },
   {
    title:'启用状态',
    dataIndex:'status',
    hideInSearch:true,
    ellipsis:true,
},
{
  title:'描述',
  dataIndex:'remark',
  hideInSearch:true,
  ellipsis:true,
  renderText:()=>'测试'
},
{
  title:'创建日期',
  dataIndex:'createTime',
  width:200,
  ellipsis:true,
  hideInSearch:true,
  renderText:()=>'2023-01-01'
},

   {
    title:'操作',
    valueType:'option',
    width:200,
    render: (text, record:any, _, action) => [
       <a key='detail' onClick={async () => {
        setDetail(record)
         setShowCreate(true)
       }}>详情</a>,
       <a key='detail' onClick={async () => {
        setShowPrice(true)
        setEditableMoneyRowKeys(moneyData.map((item:any)=>item.pId))
       }}>维护含税价</a>,
       <Popconfirm title='确定要删除吗?' key='delete' onConfirm={() => handleDelete(record.id)}><a>删除</a></Popconfirm>
    ]}
   ]
   const handleDelete = async(id:string) => {
      
   };

return (<PageContainer>
    <ProTable actionRef={actionRef} headerTitle='列表' pagination={{pageSizeOptions: ['20', '100', '500']}}
        dataSource={priceData} columns={columns} rowKey='key' toolbar={{settings: []}}
       search={{labelWidth: 120}} toolBarRender={() => [<Button type='primary' key='primary' onClick={() => {setShowCreate(true);setDetail(undefined)}}>新增</Button>]}
   />
  <DrawerForm title={detail ? '编辑' : '新增'} onVisibleChange={setShowCreate} visible={showCreate} drawerProps={{forceRender: true,destroyOnClose: true}} 
  onFinish={async (values: any) => {
      var val = undefined
      return true;
  }}>
       
       <ProForm.Group>
           <ProFormText name='priceLevel' label='价格表名称'  placeholder='请输入价格表名称' width='md' initialValue={detail?.priceLevel}  />

       </ProForm.Group>
       <ProForm.Group>
        <ProFormTextArea name='remark' label='描述'  placeholder='请输入描述' width='lg'  />
       </ProForm.Group>
    
       <ProForm.Group>
        <ProFormSelect name='dealers' label='适用经销商' mode='multiple'  placeholder='请选择' width='lg'  />
       </ProForm.Group>
	  </DrawerForm>

    <DrawerForm title={'价格维护'}   width={'70%'} onVisibleChange={setShowPrice} visible={showPrice} drawerProps={{forceRender: true,destroyOnClose: true}} 
  onFinish={async (values: any) => {
     return false

  }}>
       <ProTable
                  style={{marginLeft:-20}}
                  headerTitle="产品列表"
                  dataSource={moneyData}
                  search={false}
                  columns={moneyColumns}
                  rowKey='pId'
                  key='pmoney'
                  toolbar={{settings:[]}}
                  pagination={{pageSizeOptions: ['20', '100', '500']}}
                  options = {{
                    search:{
                      placeholder:'请输入产品名称或型号',
                      allowClear:true,
                      onSearch:(value)=>{
                        // setProSearch(value)
                        // var keys = {}
                        // moneyData.forEach((item:any)=>{
                        //   keys[item.productId] = item.price
                        // })
                        // var searchData = oriData.filter((item:any)=>{
                        //   if(keys[item.productId]){
                        //     item.price = keys[item.productId]
                        //   }
                        //   if(item.productName.indexOf(value)>=0||item.productCode.indexOf(value)>=0){
                        //     return true
                        //   }
                        //   return false
                        // })
                        // setOriData([...oriData])
                        // setMoneyData(searchData)
                        // setEditableMoneyRowKeys(searchData.map((item:any)=>item.pId))
                      }
                    }
                  }}
                  toolBarRender={() => [
                    <Button type='primary' key='primary' onClick={() => {
                      // proRef.current?.refersh()
                      // setProModalVisible(true)
                   }}>添加产品</Button>]}
                  editable={{
                    editableKeys:editableMoneyKeys,
                    type: 'multiple',
                    deletePopconfirmMessage:'确定要删除吗？',
                    onChange: setEditableMoneyRowKeys,
                    onDelete:async(v,record)=>{
                        //调用删除
                        var allData = oriData.filter((item:any)=>{
                          return item.productId != record.productId
                        })
                        // var searchData = allData.filter((item:any)=>{
                        //   if(item.productName.indexOf(proSearch)>=0||item.productCode.indexOf(proSearch)>=0){
                        //     return true
                        //   }
                        //   return false
                        // })
                        // console.log(allData.length)
                        // setMoneyData(searchData)
                        setOriData(allData)
                        // setProModalVisible(false);
                        // setEditableMoneyRowKeys(searchData.map((item:any)=>item.pId))
                    },
                    onValuesChange: (record, recordList) => {
                      setMoneyData(recordList);
                    },
                    actionRender: (row, config, defaultDoms) => {
                      return [defaultDoms.delete];
                    }
                  }}
        />
         
	  </DrawerForm>

   </PageContainer>
)}